<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue-2.6.12.js"> </script>
    <script type="text/javascript" src="../js/vue-router-3.4.9.js"> </script>
    <script type="text/javascript" src="../js/myajax.js"></script>
    <script type="text/javascript" src="../js/qs-6.9.4.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/user/show">查询</router-link>
        <router-link to="/user/add">添加</router-link>
        <hr>
        <router-view></router-view>
    </div>

    <template id="user-table">
        <div>
            <form action="" @submit.prevent="handleAClick(1)">
                <input type="text" v-model="que">
                <input type="submit" value="查询">
            </form>
            <table border="1">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>邮箱地址</th>
                    <th>密码</th>
                    <th>手机号</th>
                    <th>用户类型</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="user in list" :key="user.userId">
                    <td>{{user.userId}}</td>
                    <td>{{user.username}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.password}}</td>
                    <td>{{user.mobile}}</td>
                    <td>{{user.role}}</td>
                    <td>{{user.status}}</td>
                    <td>{{user.createTime}}</td>
                    <td>{{user.updateTime}}</td>
                    <td>
                        <button @click="remove(user.userId)">删除</button>
                        <router-link :to="{path:'/user/update',query:{id:user.userId}}"><button>更新</button></router-link>
                    </td>
                </tr>
                </tbody>
            </table>
            <p>
                <a href=""v-for="page in pages" :key="page" @click.prevent="handleAClick(page)">
                    <button style="margin: 0 10px">{{page}}</button>
                </a>
            </p>
        </div>
    </template>
    <template id="add-form">
        <div>
            <form action="" @submit.prevent="addOne">
                用户名：<input type="text" v-model="user.username"><br>
                邮箱：<input type="text" v-model="user.email"><br>
                密码：<input type="text" v-model="user.password"><br>
                手机：<input type="text" v-model="user.mobile"><br>
                类型：<input type="text" v-model="user.role"><br>
                状态：<input type="text" v-model="user.status"><br>
                <input type="submit" value="添加"><br>
            </form>
        </div>
    </template>
    <template id="update-form">
        <div>
            <form action="" @submit.prevent="updateOne">
                用户id：<input type="text" v-model="user.userId" readonly="readonly"><br>
                用户名：<input type="text" v-model="user.username"><br>
                邮箱：<input type="text" v-model="user.email"><br>
                密码：<input type="text" v-model="user.password"><br>
                手机：<input type="text" v-model="user.mobile"><br>
                类型：<input type="text" v-model="user.role"><br>
                状态：<input type="text" v-model="user.status"><br>
                <input type="submit" value="更新"><br>
            </form>
        </div>
    </template>

    <script>
        const updateForm = {
            template:"#update-form",
            data(){
                return{
                    user:{}
                }
            },
            created(){
                axios.get("/User/users/"+this.$route.query.id).then(resp=>{
                    let data = resp.data.user;
                    this.user = data;
                }).catch(err=>{
                    console.log(err);
                })
            },
            methods:{
                updateOne(){
                    axios.put("/User/users",this.user).then(resp=>{
                        if(resp.data.status == "success"){
                            alert("更新成功");
                            this.$router.push("/user/show");
                        }else{
                            alert("更新失败");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        }
        const addForm = {
            template:"#add-form",
            data(){
                return{
                    user:{}
                }
            },
            methods: {
                addOne(){
                    axios.post("/User/users",this.user).then(resp=>{
                        if(resp.data.status == "success"){
                            alert("添加成功");
                            this.$router.push("/user/show");
                        }else{
                            alert("添加失败");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        }
        const userTable = {
            template:"#user-table",
            data(){
                return{
                    list:[],
                    pages:[],
                    que:""
                }
            },
            created:function(){
                this.handleAClick(1);
            },
            methods:{
                handleAClick(i){
                    console.log(i);
                    console.log(this.que);
                    axios.get("/User/users?pageNum="+i+"&query="+this.que).then(resp => {
                        let data = resp.data;
                        this.list = data.list;
                        this.pages = data.pages;
                        })
                },
                remove(i){
                    console.log(i);
                    let isDelete = confirm("确定删除吗?");
                    if (!isDelete) {
                        return;
                    }
                    axios.delete("/User/users/"+i).then(resp => {
                        let responseData = resp.data;
                        console.log(responseData);
                        if (responseData.status == "success") {
                            alert("删除成功");
                            this.handleAClick(1);
                        } else {
                            alert("删除失败");
                        }
                    }).catch(err => {
                        console.log(err);
                    })
                }
            }
        }
        const router = new VueRouter({
            routes:[
                {path:"/",redirect:"/user/show"},
                {path: "/user/show",component:userTable},
                {path:"/user/add",component: addForm},
                {path:"/user/update",component: updateForm}
            ]
        })
        new Vue({
            el:"#app",
            router
        })
    </script>
</body>
</html>